<template>
  <el-container class="chart-container" ref="chart">
  </el-container>
</template>

<script>

export default {
  name: 'VisualMapCharts',
  data() {
    return {
      charts: null,
    }
  },
  props: ["mapData"],
  methods: {
    changeCharts(mapData) {
      if (this.charts) {
        this.charts.dispose()
      }
      let data = mapData.data ? mapData.data : {min: null, max: null, data: []}
      let title = mapData.title
      let seriesName = mapData.seriesName ? mapData.seriesName : title
      let map = mapData.map
      let callBackFun = mapData.callBackFun ? mapData.callBackFun : (params) => {
      }
      let myCharts = this.$echarts.init(document.querySelector('.chart-container'))
      this.charts = myCharts
      myCharts.off('click')

      let top5Data
      if (mapData.map !== 'china') {
        top5Data = null
      } else {
        const sortedData = data.data.slice().sort((a, b) => b.value - a.value);
        for (let i of sortedData) {
          if (this.$cityData[i.name]) {
            i["coord"] = this.$cityData[i.name]["cityCoord"]
          }
        }
        top5Data = sortedData.slice(0, 5)
      }


      // const projection = this.$d3.geoAlbersUsa();
      let options = {
        title: {
          text: title,
          left: 'center',
          textStyle: {
            color: '#333333',
            fontWeight: 'bold',
            fontSize: 30
          }
        },
        tooltip: {
          trigger: 'item',
          showDelay: 0,
          transitionDuration: 0.2
        },
        visualMap: {
          left: 'right',
          min: data.min,
          max: data.max,
          inRange: {
            color: [
              '#313695',
              '#4575b4',
              '#74add1',
              '#abd9e9',
              '#e0f3f8',
              '#ffffbf',
              '#fee090',
              '#fdae61',
              '#f46d43',
              '#d73027',
              '#a50026'
            ]
          },
          text: ['最高', '最低'],
          calculable: true
        },
        series: [
          {
            name: seriesName,
            type: "map",
            map: map,
            roam: true,
            zoom: 1.5,
            center: mapData["center"],
            normal: {
              borderColor: 'rgba(13, 38, 77, 1)',
              borderWidth: 1,
              areaColor: '#00BCFF',
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: data.data,
            markPoint: {
              symbol: 'circle', // 标记点的图标样式
              symbolSize: 10, // 标记点的大小
              data: top5Data,
              label: {
                show: false,
              },
            }
          },
        ],

      }

      myCharts.setOption(options,true);
      myCharts.on("click", callBackFun)
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    }
  },
  watch: {
    mapData: {
      deep: true,
      handler(newValue) {
        this.changeCharts(newValue)
      }
    }
  },
  mounted() {
    this.changeCharts(this.mapData)
  },
}
</script>

<style lang="less" scoped>
.chart-container {
  width: 100%;
  height: 85vh;
}

.echarts-box {
  width: 9.625rem;
  height: 6.325rem;
  background: #073055;
  box-sizing: border-box;
  padding: 0.5rem 0.425rem 0.4rem 0.425rem;
  display: inline-block;

  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>